<template>
  <!--订舱管理 -->
  <customContainer ref="mainRef" :config="config" />
  <div>
    <el-dialog v-model="open" :title="title" :before-close="resetForm">
      <el-form
        ref="addForms"
        :model="addForm"
        :rules="rules"
        label-width="110px"
        inline
        class="demo-ruleForm"
      >
        <el-form-item label="服务商" prop="serviceAbbreviation">
          <el-select
            v-model="addForm.serviceAbbreviation"
            filterable
            clearable
          >
            <el-option
              v-for="dict in dicts[DictDirection.服务商]"
              :key="dict.providerServiceCode"
              :label="dict.serviceSimpleName"
              :value="dict.providerServiceCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运输类型" prop="transportType">
          <el-select
            v-model="addForm.transportType"
            filterable
            placeholder="请选择运输类型"
            clearable
          >
            <el-option
              v-for="dict in dicts[DictDirection.运输类型]"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提单号" prop="ladingNo">
          <el-input v-model.trim="addForm.ladingNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="柜型" prop="cabinetType">
          <el-select
            v-model="addForm.cabinetType"
            filterable
            clearable
          >
            <el-option
              v-for="dict in dicts[DictDirection.柜子型号]"
              :key="dict.cabinetType"
              :label="dict.cabinetType"
              :value="dict.cabinetType"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="箱号" prop="caseNo">
          <el-input v-model="addForm.caseNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="拖车行" prop="towingFee">
          <el-input v-model="addForm.towingFee" clearable></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          
          type="primary"
          :loading="btnLoading"
          @click="addSubmitForm"
        >
          确定
        </el-button>
        <el-button type="info" @click="resetForm">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="open2" :title="title2" :before-close="cancle">
      <el-table v-loading="loading" :data="tableList">
        <el-table-column label="费用名称" align="center" prop="feeName"></el-table-column>
        <el-table-column label="费用金额" align="center" prop="exchangeRateAmount"></el-table-column>
        <el-table-column label="时间" align="center" prop="createDate"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { Plus, Download, Delete } from '@element-plus/icons-vue'
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { orderWarehouseList, addOrderWarehouseManagement, editOrderWarehouseManagement, deletedByIds, towingFeeDeatils } from '@/api/expressManager/bookingManage'

const dicts = useDicts()
const { proxy } = getCurrentInstance() as any

const mainRef = ref(undefined)
const multiple = ref(true),
  single = ref(true),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  transportType: '',
  serviceAbbreviation: '',
  ladingNo: '',
  cabinetType: '',
})
const open = ref(false)
const title = ref(null)
const open2 = ref(false)
const title2 = ref(null)
const btnLoading = ref(false)
const loading = ref(false)
const tableList = ref([])
const addForm = ref({
  serviceAbbreviation: '',
  transportType: '',
  ladingNo: '',
  cabinetType: '',
  caseNo: '',
  towingFee: '',
})
const rules = {
  serviceAbbreviation: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
  transportType: [{ required: true, message: '必填', trigger: 'blur' }],
  bookingFee: [{ required: true, message: '必填', trigger: 'blur' }],
  towingFee: [{ required: true, message: '必填', trigger: 'blur' }],
  ladingNo: [{ required: true, message: '必填', trigger: 'blur' }],
  cabinetType: [{ required: true, message: '必填', trigger: 'blur' }],
  caseNo: [{ required: true, message: '必填', trigger: 'blur' }],
  totalSolidWeight: [{ required: true, message: '必填', trigger: 'blur' }],
  totalVolumeWeight: [{ required: true, message: '必填', trigger: 'blur' }],
}
const addForms = ref(undefined)
const handleCabin = () => {
  open.value = true
  title.value = '新增'
}
const handleExport = () => {
  const query = {
    transportType: queryParams.value.transportType,
    serviceAbbreviation: queryParams.value.serviceAbbreviation,
    ladingNo: queryParams.value.ladingNo,
    cabinetType: queryParams.value.cabinetType,
  }
  const id = idss.value
  if (id.length == 0) {
    $download('order/SysOrderWarehouseManagementController/export', query, `warehouseDetails_${ new Date().getTime() }.xlsx`)
  } else {
    $download('order/SysOrderWarehouseManagementController/export', { idList: id }, `warehouseDetails_${ new Date().getTime() }.xlsx`)
  }
}
const editClick = (row: { [key: string]: any }) => {
  open.value = true
  title.value = '修改'
  addForm.value = row
}
const toMainInfo = (row: { [key: string]: any }) => {
  open2.value = true
  title2.value = '费用详情'
  const ld = row.ladingNo
  loading.value = true
  towingFeeDeatils(ld).then(res => {
    if (res.code == 200) {
      tableList.value = res.data
      loading.value = false
    } else {
      loading.value = false
    }
  }).catch(() => {
    loading.value = false
  })
}
const deleteRow = (row: { [key: string]: any }) => {
  const id = row.id
  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deletedByIds(id).then(res => {
      if (res.code == 200) {
        ElMessage.success('删除成功')
        mainRef.value.getList()
      } else {
        ElMessage.error('删除失败')
      }
    })
  })
}
const addSubmitForm = () => {
  const data = addForm.value
  if (title.value == '新增') {
    addOrderWarehouseManagement(data).then(res => {
      if (res.code == 200) {
        ElMessage.success('新增成功')
        open.value = false
        mainRef.value.getList()
        proxy.$refs.addForms.resetFields()
      } else {
        ElMessage.error('新增失败,请重试')
      }
    })
  } else {
    editOrderWarehouseManagement(data).then(res => {
      if (res.code == 200) {
        ElMessage.success('修改成功')
        open.value = false
        mainRef.value.getList()
        proxy.$refs.addForms.resetFields()
      } else {
        ElMessage.error('修改失败,请重试')
      }
    })
  }
}
const handleDelete = () => {
  const id = idss.value
  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deletedByIds(id).then(res => {
      if (res.code == 200) {
        ElMessage.success('删除成功')
        mainRef.value.getList()
      } else {
        ElMessage.error('删除失败')
      }
    })
  })
}
const resetForm = () => {
  open.value = false
  proxy.$refs.addForms.resetFields()
  proxy.addForm = ''
}
const cancle = () => {
  open2.value = false
}
const idss = ref([])
const handleTableSelect = (rows: { [key: string]: any }[]) => {
  multiple.value = !rows.length
  single.value = rows.length != 1
  idss.value = rows.map((item) => item.id)
}
const config = computed({
  get() {
    return {
      query: {
        fields: [
		
          {
            type: 'select',
            label: '收货站点',
            prop: 'transportType',
            option: {
              dictInfo: { dict: DictDirection.收货站点 },
            },
          },
          {
            type: 'select',
            label: '服务商',
            prop: 'serviceAbbreviation',
            option: {
              dictInfo: { dict: DictDirection.服务商 },
            },
          },
          {
            label: '提单号',
            prop: 'ladingNo',
          },
          {
            type: 'select',
            label: '柜型',
            prop: 'cabinetType',
            option: {
              dictInfo: { dict: DictDirection.柜子型号 },
            },
          },
      
        ],
        queryParams: queryParams.value,
        formOption: {},
      },
      btns: [
        {
          title: '新增',
          type: 'primary',
          icon: Plus,
          onClick: handleCabin,
        },

        {
          title: '删除',
          type: 'danger',
          icon: Delete,
          disabled: multiple.value,
          onClick: handleDelete,
        },
        {
          title: '导出',
          type: 'warning',
          icon: Download,
          onClick: handleExport,
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55', align: 'center' },
          { label: '服务商', width: '125', align: 'center', prop: 'serviceAbbreviation' },
          { label: '提单号', align: 'center', width: '150', prop: 'ladingNo' },
          { label: '运输类型',
            align: 'center',
            width: '100',
            prop: 'transportType',
            autoFormatter: {
              dict: DictDirection.运输类型,
              rowKey: 'transportType',
            } },
          { label: '柜型', align: 'center', prop: 'cabinetType' },
          { label: '箱号', align: 'center', prop: 'caseNo' },
          { label: '柜子能装实重', align: 'center', prop: 'totalSolidWeight' },
          { label: '柜子能装体积', align: 'center', width: '100', prop: 'totalVolumeWeight' },
          { label: '状态', align: 'center', width: '100', prop: 'status' },
          {
            label: '操作',
            width: '252px',
            fixed: 'right',
           
            showOverflowTooltip: false,
            className: 'custormFixedCol',
            align: 'center',
            render(h, params) {
              const buttons = [
                {
                  title: '编辑',
                  clickFun: editClick,
                },
                {
                  title: '费用详情',
                  clickFun: toMainInfo,
                },
                {
                  title: '删除',
                  clickFun: deleteRow,
                }]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleTableSelect(rows)
          },
        },
      },
      api: orderWarehouseList,
      customKey: 'express/mainBusiness/positionManage/bookingManage',
    }
  },
  set(val) {
    return val
  },
  // customKey: 'express-orderInfo',
})
</script>
<style lang="less" scoped>
/deep/.is-guttered {
  padding: 5px;
}
</style>
